<template>
    <el-form 
        ref="ruleFormRef" 
        :model="formData" 
        status-icon 
        :rules="rules" 
        label-width="80px" 
    >
        <el-form-item label="手机号" prop="phone">
            <el-input v-model="formData.phone"  autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="formData.password" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitLogin">确认登录</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
import { loginPwd } from "@/api/admin";
import { ElMessage } from 'element-plus';
export default {
    data() {
        return {
            formData:{},
            rules:{
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { validator: this.validatePhone, trigger: 'blur' }
                ],
                password:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 18, message: '密码6-18位', trigger: 'blur' },
                ]
            }
        }
    },
    methods: {
        /**
         * 自定义表单验证
         * @param {*} rule 
         * @param {*} value 
         * @param {*} callback 
         */
        validatePhone(rule, value, callback){
            // console.log(`output->rule`,rule)
            // console.log(`output->value`,value)
            // console.log(`output->callback`,callback)
            if(!(/^1[3-9]\d{9}$/.test(value))){
                callback(new Error("手机号格式错误"))
            }else{
                callback()
            }

        },
        /**
         * 提交表单
         */
        submitLogin(){
            //验证表单中的数据
            //console.log(`output->ruleFormRef`,this.$refs.ruleFormRef)
            this.$refs.ruleFormRef.validate(res=>{
                // console.log(`output->res`,res)
                if(res){
                    loginPwd(this.formData).then(res=>{
                        if(res.data.code!=1000){
                            ElMessage.error(`登录失败,${res.data.msg}`)
                        }else{
                            ElMessage.success("登录成功")
                            this.$store.dispatch("login",res.data.data)
                            this.$router.push("/home")
                        }
                    })
                }
            })
        }
    },
}
</script>
<style lang="scss" scoped>

</style>